@charset 'utf-8';

$bluefont:#0dafd2;
$grayfont:#7d7c7c;
$redfont:#f05447;
$greenfont:#26b26a;
$graylinecolor:#f0f0f0;

$bluecolor:#0dafd2;
$graycolor:#bcbcbc;
$weakcolor:#f0f0f0;
$blackcolor:#4d4c4c;

.my_message{
     width: 585px;
     height: 667px;
    .top{
        width: 540px;
        height: 71px;
        margin: 0 auto;
        border-bottom: 1px solid $weakcolor;
        h2{
            font-size: 31px;
            color: $bluecolor;
            width: 182px;
            height: 32px;
            text-align: center;
            line-height: 71px; 
            font-weight: normal;              
         }
         
        .prompt{
            width: 51px;
            height: 18px;
            font-size: 14px;
            margin-top: 34px;
            color: $grayfont;
        } 
         
       .top_right{
            width: 225px;
            height: 71px;
            .top_right_top{
            width: 156px;
            height: 35px;
            padding-left: 70px;
            padding-top: 20px;
            font-size: 13px;
            line-height: 35px;
            select{
                font-size: 12px;
                color: $grayfont; 
                border: 0;  
            }
            
            span{
                display: inline-block;
                width: 82px;
                height: 24px;
                background: $bluecolor;
                text-align: center;
                line-height: 24px;
                a{
                    color: white;
                }
            }
        }
   
       }
    }
    
    
        .bottom{
        width: 585px;
//      height: 1182px;
        margin: 0 auto;
        li{
            width: 540px;
            height: 73px;
            border-bottom: 1px solid $graylinecolor;
            margin: 14px auto 0;
            .left_part{
                .imgwrap{
                    width: 53px;
                    height: 57px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                
                .teamwork_desc{
                    margin-left: 10px;
                    h2{
                        color: $blackcolor;
                        font-size: 14px;
                    }
                    p{
                        margin-top: 5px;
                        font-size: 13px;
                        color: $blackcolor;
                    }
                }
            }
            
            .right_part{
                position: relative;
                .time{
                    font-size: 13px;
                    color: $grayfont;
                    margin: 10px auto;
                }
                div{
                 
                    span{
                        color: $grayfont;
                        font-size: 12px;
                        a{
                            font-size: 12px;
                            color: $grayfont;
                        }
                     }
                    
                    input[type="checkbox"]{
                        position: absolute;
                        left: 92px;
                        top: 43px;
                        z-index: 10;
                        opacity: 0;
                        cursor: pointer;    
                    }
                    
                    input[type="checkbox"]:checked+.replace_checkbox{
                        background: $bluecolor;
                    }
                    
                    .replace_checkbox{
                        display: inline-block;
                        position: absolute;
                        left: 92px;
                        top: 43px;
                        width: 12px;
                        height: 12px;
                        background: gray;
                        z-index: 1;
                        border-radius: 2px 2px;
                    }
                }
              

            }
        }
    }
    
    .mark{
        width: 540px;
        height: 49px;
        margin: 0 auto;
        border-bottom: 1px solid $graylinecolor;
        .mark_inner{
            width: 206px;
            height: 49px;
            float: right;
            line-height: 49px;
            font-size: 12px;
            position: relative;
            span{
                a{
                  color: $grayfont;  
                }
            }
            span:first-of-type~span{
                margin-left: 23px;               
            }
            
            input[type="checkbox"]{
                        position: absolute;
                        left: 188px;
                        top: 19px;
                        z-index: 10;
                        opacity: 0;
                        cursor: pointer;    
                    }
                    
            input[type="checkbox"]:checked+.replace_checkbox{
                background: $bluecolor;
            }
            
            .replace_checkbox{
                display: inline-block;
                position: absolute;
                left: 165px;
                top: 19px;
                width: 12px;
                height: 12px;
                background: gray;
                z-index: 1;
                border-radius: 2px 2px;
            }
           
        }
    }
    
    .page_last{
    font-size: 12px;
    width: 538px;
    height: 12px;
    text-align: right;
    margin: 10px auto 0;
    .page_btn{
        border: 0;
    }
    a{
        display: inline-block;
        color: #929191;  
    }
}

}
